import React from 'react'
// 路由组件
import { Router, Route, Switch, Redirect } from 'react-router-dom'
// 导入自定义 history对象
// 导入自定义history
import { customHistory } from './utils/history'
// 根 APP 样式
import './App.scss'
// 业务组件
import { Layout } from '@/pages/Layout/Layout'
import { Login } from '@/pages/Login/login'
import { ProfileEdit } from '@/pages/Edit/ProfileEdit'
import { Article } from './pages/Article/Article'
import { isAuth } from './utils/token'
import { HOC } from './pages/HOC/HOC'
function App() {
  const authRoute = () => {
    const isLogin = isAuth()
    return isLogin ? <ProfileEdit /> : <Redirect to={'/login'} />
  }
  return (
    // 通过history属性指定自定义history
    <Router history={customHistory}>
      <div className="app">
        <Switch>
          {/* 以下两种方式都可以实现路由重定向。区别：第1种可以执行逻辑判断，第2种不行。 */}
          {/* <Route exact path={'/'} render={() => <Redirect to={'/home'} />} /> */}
          <Route exact path={'/'} render={() => <Redirect to={'/layout'} />} />
          <Route path={'/layout'} component={Layout}></Route>
          <Route path={'/login'} component={Login}></Route>
          <Route path={'/articles/:id'} component={Article} />
          <Route path={'/edit'} render={authRoute} />
          <Route path={'/hoc'} render={HOC} />
        </Switch>
      </div>
    </Router>
  )
}

export default App
